
<template>  
  <div id="app">  
    <!-- 顶部导航栏 -->  
    <nav class="navbar">  
      <img src="/logo.png" alt="图表信息" class="icon" />
          
      <ul>  
        <li><router-link to="/main">首页</router-link></li>  
        <li><router-link to="/search">全部商品</router-link></li>  
        <li><router-link to="/webdate">销售统计</router-link></li>  
        <!-- 添加更多导航链接 -->  
      </ul>  
    </nav>  
    <!-- 居中卡片 -->  
   
     
  
    <div class="card-container">  
      <div class="card">  
        <el-form :inline="true" :model="frmQuery" class="demo-form-inline">
        <el-form-item label="商品名称">
          <el-input v-model="frmQuery.product_name" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="品牌名称">
          <el-input v-model="frmQuery.brand_name" placeholder="请输入品牌名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="btnQuery">搜索</el-button>
          
        </el-form-item>
        

        <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
      </el-form>

      <el-table :data="tableData"  style="width: 100%">  
        <el-table-column width="150">  
  <template #default="scope">  
    <a :href="scope.row.product_link" target="_blank">  
      <img :src="scope.row.image_url" alt="产品图片" style="width: 100%; height: auto;">  
    </a>  
  </template>  
</el-table-column> 
<el-table-column prop="product_name">  
    <template #default="scope">  
      <a :href="scope.row.product_link" target="_blank" class="no-underline">  
        {{ scope.row.product_name }}  
      </a>  
    </template>  
  </el-table-column> 
  <el-table-column  prop="price" width='150'>  
  <template #default="scope">  
    <!-- 使用 v-bind 绑定样式来设置颜色，同时添加 ￥ 符号 -->  
    <span :style="{ color: 'red' }">￥{{ scope.row.price }}</span>  
  </template>  
</el-table-column>
<el-table-column  prop="sales_volume" width='120' >  
  <template #default="scope">  
    有<span :style="{ color: 'red' }">{{ scope.row.sales_volume }}</span>人购买  
  </template>  
</el-table-column>  
<el-table-column width='120'>
<template #default="scope">  
    <div style="display: flex; flex-direction: column;">  
      <span>{{ scope.row.platform_name }}</span>  
      <span style="font-size: 0.8em; color: #999;">{{ scope.row.store_name }}</span>  
    </div>  
  </template>  
</el-table-column>
</el-table>
      </div>  
    </div>  
  </div> 
   
</template>  
  
<script>  
import axios from 'axios';
export default {  
  name: 'App',  
  data(){
    return{
        frmQuery: {
        product_name: '', // 商品名称的输入值  
        brand_name: '',
        product_link:'',
        sales_volume:'', // 品牌名称的输入值 
        platform_name:'',
        searchResults: [], // 用于存储搜索结果的属性   
      },
      tableData: [],
    }
    },
mounted(){

},
methods:{
    btnQuery() {  
      // 获取输入值  
      const product_name = this.frmQuery.product_name;  
    const brand_name = this.frmQuery.brand_name; 
  
      // 构造完整的URL，并将查询参数附加到URL上  
      const url = `http://localhost:8080/compare2/search?product_name=${product_name}&brand_name=${brand_name}`; 
   
      // 发送GET请求到后端  
      axios.get(url)  
        .then(response => {  
          // 处理成功的响应  
          this.tableData = response.data; // 假设后端返回的是搜索结果数组  
          this.errorMessage = ''; // 清空错误信息 
          console.log(response.data);
         
        })  
        .catch(error => {  
          // 处理错误  
          console.error(error);  
          this.errorMessage = '查询失败，请稍后重试。'; // 设置错误信息  
        });  
    },   
}
  // ... 其他选项和生命周期钩子 ...  
};  
</script>  
  
<style>  

#app {  
  display: flex;  
  flex-direction: column;  
  height: 100vh; /* 使应用占据整个视口高度 */  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
}  
  
.navbar {  
   /* 固定在顶部 */  
  top: 0;  
  left: 0;  
  right: 0;  
  height: 100px; /* 设置导航栏高度 */  
  background-color: #333; /* 设置背景颜色 */  
  display: flex;  
  align-items: center; /* 垂直居中 */  
  
}  
  
.navbar ul {  
  list-style-type: none;  
  margin: 0;  
  padding: 0;  
  display: flex;
  padding-left: 50px; /* 设置内边距，让文字离左边有一定的距离 */  
  
}  
  
.navbar li {  
  margin: 0 10px;  
}  
  
.navbar li a {  
  color: white;  
  text-decoration: none;  
}  
  
.card-container {  
   
  padding: 80px;  
  border-radius: 5px;  
  /* 设置卡片的高度和宽度 */  
  height: 300px; /* 您可以根据需要调整这个值 */  
  width: 90%; 
  
}

.card {  
  background-color: #fff;  
  padding: 20px;  
  border-radius: 5px;  
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  
}  
/* 移除超链接的下划线 */  
.no-underline {  
  text-decoration: none;  
  color: inherit; /* 继承父元素的颜色 */  
  cursor: pointer; /* 显示鼠标悬停时为手形图标 */  
}  
  
/* 当鼠标悬停在超链接上时改变颜色 */  
.no-underline:hover {  
  color: red; /* 举例：鼠标悬停时变为蓝色 */  
}  
</style>
